<template>
  <div class="container">
    <!-- 顶部 退出按钮 -->
    <div class="topDiv">
      <div class="topLogo" @click="reload"></div>
      <div class="topLogo1"></div>
      <div class="oprationDiv">
        <span @click="opration('即时通讯')"><i class="icon sz_question_answer"></i> 即时通讯</span>
        <!-- 临时屏蔽搜索按钮 <span @click="opration()" class="icon sz_search"></span> -->
        <el-badge :value="messageNum" class="item">
          <span @click="opration('消息通知')" class="icon sz_message"></span>
        </el-badge>
        <span @click="changePassword" class="icon sz_setting"></span>
        <span class="icon sz_shut_down" @click="exit"></span>
      </div>
    </div>
    <div class="centerDiv">
      <div class="centerDiv-left margin-right-8">
        <div class="firstRow">
          <!-- 新闻板块 -->
          <div class="newsDiv margin-right-8">
            <newsPage></newsPage>
          </div>
          <!-- 公告板块 -->
          <div class="noticeDiv margin-left-8">
            <noticePage></noticePage>
          </div>
        </div>
        <div class="secondRow">
          <!-- 三方 -->
          <div class="thirdParty">
            <thirdPartyPage></thirdPartyPage>
          </div>
        </div>
        <div class="thirdRow">
          <!-- 待办工作模块 -->
          <div class="todoTaskDiv margin-right-8">
            <todoTaskPage></todoTaskPage>
          </div>
          <!--邮件模块 -->
          <!-- <div class="mailDiv margin-left-8">
            <mailPage></mailPage>
          </div> -->
        </div>
        <div class="fourthRow">
          <!-- 友情链接 -->
          <div class="friendshipLinkDiv">
            <friendshipLinkPage></friendshipLinkPage>
          </div>
        </div>
      </div>
      <div class="centerDiv-right margin-left-8">
        <!-- 个人信息 -->
        <div class="personalDiv">
          <div class="personalImg">
            <!-- <img :src="'/seeyon' + userInfo.imgUrl" alt="" /> -->
            <img :src="'data:image/jpeg;base64,' + userInfo.imgBase64Str" alt="Base64图片" />
          </div>
          <div class="personalInfo">
            <p class="t1">
              <span class="name">{{ userInfo.userName }}</span
              ><span class="address">ip:{{userInfo.ip}}</span>
            </p>
            <p class="t2">{{ userInfo.role }}</p>
          </div>
        </div>
        <!-- 我的待办 -->
        <div class="todoDiv">
          <!-- <todoPage></todoPage> -->
          <mailPage></mailPage>
        </div>
        <!-- 我的日程模块 -->
        <div class="scheduleDiv">
          <schedulePage></schedulePage>
        </div>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>您确定要退出系统？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmLoginut">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改密码"
      :visible.sync="changePasswordDialogVisible"
      width="30%"
      :before-close="handleClosePassword"
      class="changePasswordDialog"
    >
    <el-form :model="form">
      <el-form-item required label="原密码:" :label-width="formLabelWidth">
        <el-input placeholder="请输入原密码" v-model="form.oldPassword" type="password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item required label="新密码:" :label-width="formLabelWidth">
        <el-input placeholder="请输入新密码" v-model="form.newPassword" type="password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item required label="确认新密码:" :label-width="formLabelWidth">
        <el-input placeholder="请再次输入新密码" v-model="form.confirmPassword" type="password" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelChangePassword">取 消</el-button>
        <el-button type="primary" @click="confirmChangePassword">更 新</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import newsPage from "@/views/newsPage/index.vue";
import noticePage from "@/views/noticePage/index.vue";
import todoPage from "@/views/todoPage/index.vue";
import thirdPartyPage from "@/views/thirdPartyPage/index.vue";
import todoTaskPage from "@/views/todoTaskPage/index.vue";
import mailPage from "@/views/mailPage/index.vue";
import friendshipLinkPage from "@/views/friendshipLinkPage/index.vue";
import schedulePage from "@/views/schedulePage/index.vue";
export default {
  components: {
    newsPage,
    noticePage,
    todoPage,
    thirdPartyPage,
    todoTaskPage,
    mailPage,
    friendshipLinkPage,
    schedulePage,
  },
  props: {
    userInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      dialogVisible: false, //退出登录弹窗
      changePasswordDialogVisible: false, //修改密码弹窗
      formLabelWidth: "110px",
      form: {
        oldPassword: "",
        newPassword: "",
        confirmPassword: "",
      },
      messageNum: '', //消息数量
    };
  },
  created() {
    this.getMessageNum();
    // 监听 visibilitychange 事件
    document.addEventListener('visibilitychange', ()=> {
        if (!document.hidden) {
            console.log('用户回到当前标签页');
            this.getMessageNum();
        }
    });
  },
  methods: {
    cancelChangePassword(){
      this.changePasswordDialogVisible = false
      this.form = {
        oldPassword: "",
        newPassword: "",
        confirmPassword: "",
      }
    },
    handleClosePassword(){
      this.changePasswordDialogVisible = false
      this.form = {
        oldPassword: "",
        newPassword: "",
        confirmPassword: "",
      }
    },
    // 修改密码
    changePassword(){
      this.changePasswordDialogVisible = true;
    },
    // 确认修改密码
    confirmChangePassword(){
      if(this.form.oldPassword == ''){
        this.$message({
          message: '请输入原密码',
          type: 'error',
          customClass: 'custom-message-position'
        });
        return;
      }
      if(this.form.newPassword == ''){
        this.$message({
          message: '请输入新密码',
          type: 'error',
          customClass: 'custom-message-position'
        });
        return;
      }
      if(this.form.confirmPassword == ''){
        this.$message({
          message: '请输入确认密码',
          type: 'error',
          customClass: 'custom-message-position'
        });
        return;
      }
      if(this.form.newPassword != this.form.confirmPassword){
        this.$message({
          message: '新密码与确认密码不一致',
          type: 'error',
          customClass: 'custom-message-position'
        });
        return;
      }
       this.axios({
        url: `/seeyon/rest/changePassword/update`,
        method: "post",
        headers: {
          "Content-Type": "application/json",
          token: localStorage.getItem("restToken"),
        },
        data: { 
          token:window.location.href.split('Info=')[1].split('&code=')[0],
          oldPassword: this.form.oldPassword,
          newPassword: this.form.newPassword,
          rePassword: this.form.confirmPassword,
        },
      }).then((res) => {
        this.changePasswordDialogVisible = false;
         this.form = {
            oldPassword: "",
            newPassword: "",
            confirmPassword: "",
          }
        console.log("修改密码", res);
        if (res.data.code == 0) {
          this.$message({
            message: '密码修改成功！',
            type: 'success',
            customClass: 'custom-message-position'
          });
          setTimeout(() => {
            this.confirmLoginut()
          },1000)
        }
        else{
          this.$message({
            message: res.data.message,
            type: 'error',
            customClass: 'custom-message-position'
          });
        }
        // window.location.href = res.data.data.redirectUrl;
      });
    },
    // 退出
    exit() {
      this.dialogVisible = true;
    },
    // 确定退出
    confirmLoginut() {
      const userInfo = window.location.href.split('Info=')[1].split('&code=')[0];
      this.axios({
        url: `/seeyon/rest/select/logout`,
        method: "post",
        headers: {
          "Content-Type": "application/json",
          token: localStorage.getItem("restToken"),
        },
        data: {
          code: userInfo,
        },
      }).then((res) => {
        this.dialogVisible = false;
        console.log("退出", res);
        if (res.data.code == 0) {
           window.location.href = res.data.data;
        }
        else{
          history.back();
        }
      });
    },
    reload() {
      window.location.reload();
    },
    opration(t){
      if(!!t && t == '即时通讯'){
        this.axios({
        url: "/seeyon/selectModel.do?method=getRestToken",
        method: "get",
        headers: {
          "Content-Type": "application/json",
        },
      }).then((result) => {
        this.axios({
            url: `/seeyon/rest/select/getUserPassword?token=${result.data.id || result.data}`,
            method: "post",
            headers: {
              "Content-Type": "application/json",
            },
            data: {
              loginName: localStorage.getItem("loginName"),
            },
          }).then((res) => {
            console.log("即时通讯", res);
            if (res.data.code == 0) {
              window.open(res.data.data, '_blank')
            }
            else{
              this.$message({
                message: res.data.message,
                type: 'error',
                customClass: 'custom-message-position'
              });
            }
          });
      });
         
      }
      else if(!!t && t == '修改密码'){
        
      }
      else if(!!t && t == '消息通知'){
        // var url=  `/seeyon/oasso.do?method=redirect&loginName=${localStorage.getItem("loginName")}&url=${encodeURIComponent('/seeyon/message.do?method=messageCenter&from=box')}`
        // this.axios({
        //   url: url,
        //   method: "get",
        //   headers: {
        //     "Content-Type": "application/json",
        //   },
        // }).then((res) => {
        //   window.open(res.data, "_blank");
        // });
        window.open('/seeyon/H5/apps/messagePage/index.html', "_blank");
      }
      else{
        alert('暂未开发')
      }
    },
    // 获取消息数量
    getMessageNum() {
      this.axios({
        url: "/seeyon/rest/select/getCategory",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          "token":localStorage.getItem("restToken"),
        },
        data:{
          loginName: localStorage.getItem("loginName")
        }
      }).then((res) => {
        console.log('获取消息数量',res)
        if(res.data.code == 0){
          this.messageNum = res.data.data.unreadCount
        }
      })
    }
  },
};
</script>
<style lang="less" scoped>
.item {
  margin-top: 6px;
  margin-right: 12px;
}
/deep/.changePasswordDialog{
    overflow: inherit;
}
/deep/.changePasswordDialog .el-dialog{
  margin-top: 0px !important;
  width: 500px !important;
  height: 380px;
}
.margin-left-8 {
  margin-left: 8px;
}
.margin-right-8 {
  margin-right: 8px;
}
.container {
  width: 100%;
  height: 100%;

  .topDiv {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    padding: 0 40px;
    .topLogo {
      width: 456px;
      height: 56px;
      background-image: url("@/imgs/logo.png");
      background-size: 100% 100%;
      cursor: pointer;
    }
    .topLogo1 {
      width: 451px;
      height: 47px;
      background-image: url("@/imgs/logo1.png");
      background-size: 100% 100%;
      margin-left: 30px;
    }
    .oprationDiv {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      position: relative;
      span {
        color: #c3dff3;
        font-size: 20px;
        margin: 0px 8px;
        cursor: pointer;
      }
      .exitBtn {
        width: 20px;
        height: 20px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .centerDiv {
    width: 100%;
    padding: 0px 20px 20px 20px;

    .centerDiv-left {
      width: calc(75% - 8px);
      display: inline-block;
      .firstRow {
        width: 100%;
        height: 300px;
        margin-bottom: 16px;
        .newsDiv {
          height: 100%;
          width: calc(60% - 8px);
          background-color: #fff;
          background-image: url("@/imgs/module.png");
          display: inline-block;
          background-size: 100% 100%;
          flex: 3;
          border-radius: 10px;
          padding: 20px;
        }
        .noticeDiv {
          height: 100%;
          width: calc(40% - 8px);
          background-color: #fff;
          background-image: url("@/imgs/module.png");
          background-size: 100% 100%;
          flex: 2;
          border-radius: 10px;
          padding: 20px;
          display: inline-block;
          vertical-align: top;
        }
      }
      .secondRow {
        width: 100%;
        height: 140px;
        display: flex;
        background-color: #fff;
        border-radius: 10px;
        margin-bottom: 16px;
        .thirdParty {
          width: 100%;
          height: 100%;
          padding: 10px 20px;
        }
      }
      .thirdRow {
        width: 100%;
        height: 300px;
        margin-bottom: 16px;
        .todoTaskDiv {
          height: 100%;
          width: 100%;
          display: inline-block;
          background-color: #fff;
          border-radius: 10px;
          padding: 20px;
        }
        .mailDiv {
          width: calc(40% - 8px);
          display: inline-block;
          vertical-align: top;
          height: 100%;
          background-color: #fff;
          border-radius: 10px;
          padding: 20px;
        }
      }
      .fourthRow {
        width: 100%;
        min-height: 80px;
        display: flex;
        .friendshipLinkDiv {
          height: 100%;
          background-color: #fff;
          flex: 3;
          border-radius: 10px;
          padding: 20px;
        }
      }
    }
    .centerDiv-right {
      width: calc(25% - 8px);
      display: inline-block;
      vertical-align: top;
      .personalDiv {
        height: 80px;
        background-image: url(../../imgs/personal.png);
        padding: 10px 20px;
        display: flex;
        align-items: center;
        border-radius: 10px;
        margin-bottom: 16px;
        background-size: 100% 100%;
        .personalImg {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          overflow: hidden;
          display: inline-block;
          margin-right: 10px;
          img {
            width: 60px;
            height: 60px;
          }
        }
        .personalInfo {
          flex: 1;
          height: 50px;
          display: inline-block;
          .t1 {
            line-height: 25px;
            .name {
              font-size: 18px;
              font-weight: 600;
              margin-right: 10px;
            }
          }
          .t2 {
            line-height: 25px;
          }
        }
      }
      .todoDiv {
        height: 180px;
        background-color: #fff;
        border-radius: 10px;
        margin-bottom: 16px;
        padding: 20px;
      }
      .scheduleDiv {
        width: 100%;
        height: 575px;
        background-color: #fff;
        border-radius: 10px;
        margin-bottom: 16px;
        padding: 20px;
      }
    }
  }
}
.el-dialog__wrapper {
  top: 50% !important;
  /* left: 50%; */
  transform: translateY(-50%) !important;
}
</style>